<h3>Dynamic JSON Form Builder</h3>
<p>The Form.io form builder interface allows you to embed a form builder within your application, which generates a JSON schema of the form created.</p>
<p><a href="https://github.com/formio/angular-formio/wiki/Form-Builder" class="btn btn-primary" target="_blank"><span class="fa fa-book"></span> Builder Documentation</a></p>
<strong>builder.html</strong>
<pre class="text-center"><code class="language-markup">&lt;form-builder [form]="form" (change)="onChange($event)"&gt;&lt;/form-builder&gt;</code></pre>
<strong>builder.ts</strong>
<pre><code class="language-javascript">import &#123; Component, ElementRef, ViewChild &#125; from '@angular/core';
@Component(&#123;
  template: require('./builder.html')
&#125;)
export class BuilderComponent &#123;
  @ViewChild('json') jsonElement?: ElementRef;
  public form: Object = &#123;components: []&#125;;
  onChange(event) &#123;
    console.log(event.form);
  &#125;
&#125;</code></pre>
<form-builder [form]="form" (change)="onChange($event)"></form-builder>
<hr/>
<h3 class="text-center text-muted">As JSON Schema</h3>
<div class="well jsonviewer">
  <pre id="json"><code class="language-json" #json></code></pre>
</div>
